<template>
  <!-- 全局图片错误处理指令已在main.js中注册 -->
  <div class="game-view content-container">
    <!-- 头部横幅 -->
    <div class="game-header">
      <div class="header-bg">
        <img v-img-error src="../assets/黑神话.jpeg" alt="游戏专题" class="header-image">","},{
        <div class="header-overlay"></div>
      </div>
      <div class="header-content">
        <h1 class="header-title">乐享游戏</h1>
        <p class="header-subtitle">探索游戏世界，体验无限乐趣</p>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="game-content content-wrapper">
      <!-- 标签页导航 -->
      <div class="tab-navigation">
        <button 
          v-for="tab in tabs" 
          :key="tab.key"
          class="tab-item"
          :class="{ active: activeTab === tab.key }"
          @click="switchTab(tab.key)"
        >
          {{ tab.name }}
        </button>
      </div>

      <!-- 标签页内容 -->
      <div class="tab-content">
        <!-- 爆火游戏视频 -->
        <div v-if="activeTab === 'hotGames'" class="hot-games-section">
          <div class="section-header">
            <h2 class="section-title">🔥 爆火游戏视频</h2>
            <a href="#" class="section-more">更多 <i class="fa fa-angle-right"></i></a>
          </div>
          <div class="games-grid">
            <div 
              v-for="game in hotGames" 
              :key="game.id"
              class="game-card"
              @click="playGameVideo(game)"
            >
              <div class="game-thumbnail">
                <img v-img-error :src="game.thumbnail" alt="{{ game.title }}" class="game-image">","},{
                <div class="game-duration">{{ game.duration }}</div>
                <div class="game-overlay">
                  <div class="game-play-icon">
                    <i class="fa fa-play-circle"></i>
                  </div>
                </div>
              </div>
              <div class="game-info">
                <h3 class="game-title">{{ game.title }}</h3>
                <p class="game-category">{{ game.category }}</p>
                <div class="game-stats">
                  <span class="game-views"><i class="fa fa-eye"></i> {{ formatNumber(game.views) }}</span>
                  <span class="game-likes"><i class="fa fa-heart"></i> {{ formatNumber(game.likes) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 游戏测评 -->
        <div v-if="activeTab === 'gameReviews'" class="game-reviews-section">
          <div class="section-header">
            <h2 class="section-title">📝 游戏测评</h2>
            <a href="#" class="section-more">更多 <i class="fa fa-angle-right"></i></a>
          </div>
          <div class="reviews-container">
            <div 
              v-for="review in gameReviews" 
              :key="review.id"
              class="review-card"
            >
              <div class="review-header">
                <div class="review-rating">
                  <span class="rating-score">{{ review.rating }}</span>
                  <div class="rating-stars">
                    <i v-for="n in 5" :key="n" class="fa fa-star" :class="{ 'active': n <= Math.floor(review.rating) }"></i>
                  </div>
                </div>
                <h3 class="review-title">{{ review.title }}</h3>
              </div>
              <div class="review-content">
                <img v-img-error :src="review.cover" alt="游戏封面" class="review-cover">","},{
                <p class="review-excerpt">{{ review.excerpt }}</p>
              </div>
              <div class="review-footer">
                <div class="review-game-info">
                  <span class="review-game-title">{{ review.gameTitle }}</span>
                  <span class="review-game-platform">{{ review.platform }}</span>
                </div>
                <div class="review-meta">
                  <span class="review-author">{{ review.author }}</span>
                  <span class="review-date">{{ review.date }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 新游戏爆料 -->
        <div v-if="activeTab === 'gameNews'" class="game-news-section">
          <div class="section-header">
            <h2 class="section-title">🔍 新游戏爆料</h2>
            <a href="#" class="section-more">更多 <i class="fa fa-angle-right"></i></a>
          </div>
          <div class="news-container">
            <div 
              v-for="news in gameNews" 
              :key="news.id"
              class="news-card"
            >
              <div class="news-thumbnail">
                <img v-img-error :src="news.thumbnail" alt="{{ news.title }}" class="news-image">","},{
              </div>
              <div class="news-content">
                <h3 class="news-title">{{ news.title }}</h3>
                <p class="news-excerpt">{{ news.excerpt }}</p>
                <div class="news-meta">
                  <span class="news-source">{{ news.source }}</span>
                  <span class="news-date">{{ news.date }}</span>
                  <span class="news-comments"><i class="fa fa-comment"></i> {{ news.comments }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 游戏联赛 -->
        <div v-if="activeTab === 'gameTournaments'" class="tournaments-section">
          <div class="section-header">
            <h2 class="section-title">🏆 游戏联赛</h2>
            <a href="#" class="section-more">更多 <i class="fa fa-angle-right"></i></a>
          </div>
          
          <!-- 直播中 -->
          <div class="live-section">
            <h3 class="live-title">📺 正在直播</h3>
            <div class="live-container">
              <div 
                v-for="live in liveStreams" 
                :key="live.id"
                class="live-card"
                @click="watchLive(live)"
              >
                <div class="live-thumbnail">
                  <img v-img-error :src="live.thumbnail" alt="{{ live.title }}" class="live-image">","},{
                  <div class="live-badge">LIVE</div>
                  <div class="live-viewers">{{ live.viewers }} 观看</div>
                  <div class="live-overlay">
                    <div class="live-play-icon">
                      <i class="fa fa-play-circle"></i>
                    </div>
                  </div>
                </div>
                <div class="live-info">
                  <h4 class="live-title-text">{{ live.title }}</h4>
                  <p class="live-game">{{ live.game }}</p>
                  <div class="live-teams">
                    <span class="team team-a">{{ live.teamA }}</span>
                    <span class="vs">VS</span>
                    <span class="team team-b">{{ live.teamB }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 赛事视频 -->
          <div class="tournament-videos">
            <h3 class="videos-title">🎮 赛事视频</h3>
            <div class="videos-container">
              <div 
                v-for="video in tournamentVideos" 
                :key="video.id"
                class="tournament-video-card"
                @click="playTournamentVideo(video)"
              >
                <div class="tournament-video-thumbnail">
                  <img v-img-error :src="video.thumbnail" alt="{{ video.title }}" class="tournament-video-image">
                  <div class="tournament-video-duration">{{ video.duration }}</div>
                </div>
                <div class="tournament-video-info">
                  <h4 class="tournament-video-title">{{ video.title }}</h4>
                  <p class="tournament-video-series">{{ video.series }}</p>
                  <div class="tournament-video-stats">
                    <span class="tournament-video-views"><i class="fa fa-eye"></i> {{ formatNumber(video.views) }}</span>
                    <span class="tournament-video-date">{{ video.date }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GameView',
  data() {
    return {
      // 标签页数据
      tabs: [
        { key: 'hotGames', name: '爆火游戏视频' },
        { key: 'gameReviews', name: '游戏测评' },
        { key: 'gameNews', name: '新游戏爆料' },
        { key: 'gameTournaments', name: '游戏联赛' },
      ],
      activeTab: 'hotGames',
      
      // 爆火游戏视频数据
      hotGames: [
        { id: 1, title: '《黑神话：悟空》最新实机演示', thumbnail: '/src/assets/悟空.jpg', duration: '15:30', category: '动作冒险', views: 18500000, likes: 1250000 },
        { id: 2, title: '《赛博朋克2077》夜之城探索', thumbnail: '/src/assets/黑悟空.jpg', duration: '23:45', category: '开放世界', views: 8900000, likes: 650000 },
        { id: 3, title: '《艾尔登法环》最强build推荐', thumbnail: '/src/assets/周杰伦.png', duration: '18:20', category: 'ARPG', views: 12300000, likes: 890000 },
        { id: 4, title: '《原神》4.0版本新角色测评', thumbnail: '/src/assets/悟空.jpg', duration: '25:10', category: 'RPG', views: 25600000, likes: 1890000 },
        { id: 5, title: '《英雄联盟》S13全球总决赛精彩集锦', thumbnail: '/src/assets/黑悟空.jpg', duration: '12:45', category: 'MOBA', views: 32100000, likes: 2450000 },
        { id: 6, title: '《星空》主线任务攻略', thumbnail: '/src/assets/周杰伦.png', duration: '30:20', category: 'RPG', views: 7800000, likes: 520000 },
      ],
      
      // 游戏测评数据
      gameReviews: [
        { 
          id: 1, 
          title: '《黑神话：悟空》深度测评：国产3A的里程碑', 
          excerpt: '《黑神话：悟空》不仅仅是一款游戏，更是国产游戏工业的一次宣言。本文将从画面、剧情、玩法等多个维度，全面分析这款备受期待的动作游戏...', 
          rating: 9.6, 
          gameTitle: '黑神话：悟空', 
          platform: 'PC/PS5/Xbox Series X', 
          cover: '/src/assets/悟空.jpg',
          author: '游戏测评师小李', 
          date: '2023-08-15',
        },
        { 
          id: 2, 
          title: '《博德之门3》：CRPG的新标杆', 
          excerpt: 'Larian工作室的最新力作《博德之门3》凭借出色的剧情设计和自由度，为CRPG类型树立了新的标准。本文将深入探讨游戏的核心魅力...', 
          rating: 9.4, 
          gameTitle: '博德之门3', 
          platform: 'PC/PS5', 
          cover: '/src/assets/黑悟空.jpg',
          author: 'CRPG爱好者', 
          date: '2023-09-10',
        },
        { 
          id: 3, 
          title: '《装甲核心6》：机甲战斗的艺术', 
          excerpt: 'FromSoftware回归机甲游戏领域，带来了《装甲核心6》。这款游戏不仅继承了系列的硬核风格，还融入了更多现代游戏设计理念...', 
          rating: 8.8, 
          gameTitle: '装甲核心6', 
          platform: 'PC/PS5/Xbox Series X', 
          cover: '/src/assets/周杰伦.png',
          author: '机甲游戏专家', 
          date: '2023-08-25',
        },
      ],
      
      // 新游戏爆料数据
      gameNews: [
        {
          id: 1,
          title: '《塞尔达传说：王国之泪》DLC细节曝光，将带来全新冒险',
          excerpt: '据任天堂官方消息，《塞尔达传说：王国之泪》的首个DLC将于下个月发布，将包含新的地图区域、任务和装备...',
          thumbnail: '/src/assets/悟空.jpg',
          source: '任天堂官方',
          date: '2023-10-05',
          comments: 1258,
        },
        {
          id: 2,
          title: '《GTA6》开发进度更新，预计2025年发布',
          excerpt: 'Rockstar Games近日公布了《GTA6》的最新开发进展，游戏已进入后期制作阶段，预计将在2025年正式发布...',
          thumbnail: '/src/assets/黑悟空.jpg',
          source: '游戏日报',
          date: '2023-10-03',
          comments: 3521,
        },
        {
          id: 3,
          title: '国产开放世界游戏《燕云十六声》新实机演示公布',
          excerpt: 'Everstone Games发布了《燕云十六声》的最新实机演示，展示了游戏的战斗系统和开放世界探索内容...',
          thumbnail: '/src/assets/周杰伦.png',
          source: '国产游戏网',
          date: '2023-10-01',
          comments: 892,
        },
        {
          id: 4,
          title: '《暗黑破坏神4》第二赛季内容公布，全新地下城和怪物',
          excerpt: '暴雪娱乐公布了《暗黑破坏神4》第二赛季的详细内容，将带来全新的地下城、怪物类型和季节性活动...',
          thumbnail: '/src/assets/悟空.jpg',
          source: '暴雪官方',
          date: '2023-09-28',
          comments: 1435,
        },
      ],
      
      // 正在直播数据
      liveStreams: [
        {
          id: 1,
          title: '英雄联盟S14全球总决赛：T1夺冠！Faker荣膺五冠王',
          thumbnail: '/src/assets/T1.jpg',
          game: '英雄联盟',
          viewers: 1250000,
          teamA: 'T1',
          teamB: 'JDG',
        },
        {
          id: 2,
          title: 'DOTA2国际邀请赛：Team Spirit vs PSG.LGD 决赛',
          thumbnail: '/src/assets/黑悟空.jpg',
          game: 'DOTA2',
          viewers: 890000,
          teamA: 'Team Spirit',
          teamB: 'PSG.LGD',
        },
        {
          id: 3,
          title: '王者荣耀KPL秋季赛：AG超玩会 vs WB',
          thumbnail: '/src/assets/周杰伦.png',
          game: '王者荣耀',
          viewers: 650000,
          teamA: 'AG超玩会',
          teamB: 'WB',
        },
      ],
      
      // 赛事视频数据
      tournamentVideos: [
        {
          id: 1,
          title: '英雄联盟S13：BLG vs GEN 1/4决赛精彩集锦',
          thumbnail: '/src/assets/悟空.jpg',
          duration: '25:30',
          series: '英雄联盟S13',
          views: 5200000,
          date: '2023-10-04',
        },
        {
          id: 2,
          title: 'CS2 PGL哥本哈根Major：NAVI vs Vitality 决赛',
          thumbnail: '/src/assets/黑悟空.jpg',
          duration: '45:20',
          series: 'CS2 PGL Major',
          views: 3800000,
          date: '2023-10-02',
        },
        {
          id: 3,
          title: '永劫无间世界冠军赛：KN vs JTeam 决赛',
          thumbnail: '/src/assets/周杰伦.png',
          duration: '38:15',
          series: '永劫无间世界冠军赛',
          views: 2500000,
          date: '2023-09-30',
        },
        {
          id: 4,
          title: '炉石传说大师巡回赛：Thijs vs Hunterace 决赛',
          thumbnail: '/src/assets/悟空.jpg',
          duration: '1:15:40',
          series: '炉石传说大师巡回赛',
          views: 1200000,
          date: '2023-09-28',
        },
      ],
    }
  },
  methods: {
    // 切换标签页
    switchTab(tab) {
      this.activeTab = tab
    },
    
    // 播放游戏视频
    playGameVideo(game) {
      console.log('播放游戏视频:', game.title)
      // 实际应用中，这里应该跳转到视频播放页面
    },
    
    // 观看直播
    watchLive(live) {
      console.log('观看直播:', live.title)
      // 实际应用中，这里应该跳转到直播观看页面
    },
    
    // 播放赛事视频
    playTournamentVideo(video) {
      console.log('播放赛事视频:', video.title)
      // 实际应用中，这里应该跳转到视频播放页面
    },
    
    // 格式化数字
    formatNumber(num) {
      if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + '亿'
      } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
      }
      return num.toString()
    },
  },
}
</script>

<style scoped>
/* 游戏页面整体样式 */
.game-view {
  min-height: 100vh;
  background-color: var(--bg-color);
}

/* 头部横幅样式 */
.game-header {
  position: relative;
  height: 400px;
  overflow: hidden;
  margin-bottom: 30px;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.header-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 0.5s ease;
}

.game-header:hover .header-image {
  transform: scale(1.1);
}

.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
}

.header-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px;
  text-align: center;
  color: white;
}

.header-title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.header-subtitle {
  font-size: 18px;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 主要内容区域 */
.game-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

/* 标签页导航 */
.tab-navigation {
  display: flex;
  background-color: var(--card-bg);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.tab-item {
  flex: 1;
  padding: 12px 20px;
  border: none;
  background: none;
  color: var(--text-color);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s ease;
  text-align: center;
}

.tab-item:hover {
  background-color: var(--hover-color);
  color: var(--primary-color);
}

.tab-item.active {
  background-color: var(--primary-color);
  color: white;
}

/* 标签页内容 */
.tab-content {
  background-color: var(--card-bg);
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 通用区域标题样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.section-more {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.3s ease;
}

.section-more:hover {
  color: var(--primary-color);
}

/* 爆火游戏视频样式 */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.game-card {
  background-color: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.game-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.game-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 比例 */
  overflow: hidden;
}

.game-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.game-card:hover .game-image {
  transform: scale(1.05);
}

.game-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.game-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.game-card:hover .game-overlay {
  opacity: 1;
}

.game-play-icon {
  font-size: 60px;
  color: white;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.game-info {
  padding: 15px;
}

.game-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.game-category {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: var(--primary-color);
  background-color: rgba(251, 114, 153, 0.1);
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
}

.game-stats {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: var(--text-secondary);
}

.game-views, .game-likes {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 游戏测评样式 */
.reviews-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.review-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  transition: box-shadow 0.3s ease;
}

.review-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.review-rating {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rating-score {
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color);
}

.rating-stars {
  color: #ddd;
}

.rating-stars .active {
  color: #FFD700;
}

.review-title {
  flex: 1;
  margin: 0 0 0 20px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
}

.review-content {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.review-cover {
  width: 100px;
  height: 150px;
  border-radius: 4px;
  object-fit: cover;
}

.review-excerpt {
  flex: 1;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid var(--border-color);
}

.review-game-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.review-game-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
}

.review-game-platform {
  font-size: 12px;
  color: var(--text-secondary);
}

.review-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* 新游戏爆料样式 */
.news-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.news-card {
  display: flex;
  gap: 20px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 15px;
  transition: box-shadow 0.3s ease;
  cursor: pointer;
}

.news-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.news-thumbnail {
  width: 200px;
  height: 120px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.news-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-title {
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  transition: color 0.3s ease;
}

.news-card:hover .news-title {
  color: var(--primary-color);
}

.news-excerpt {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* 游戏联赛样式 */
.live-section,
.tournament-videos {
  margin-bottom: 30px;
}

.live-title,
.videos-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 15px 0;
}

/* 直播样式 */
.live-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.live-card {
  background-color: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.live-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.live-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 比例 */
  overflow: hidden;
}

.live-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.live-card:hover .live-image {
  transform: scale(1.05);
}

.live-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: #f44336;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

.live-viewers {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.live-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.live-card:hover .live-overlay {
  opacity: 1;
}

.live-play-icon {
  font-size: 60px;
  color: white;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.live-info {
  padding: 15px;
}

.live-title-text {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.live-game {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: var(--primary-color);
}

.live-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  font-size: 14px;
  font-weight: 600;
}

.team {
  padding: 5px 15px;
  border-radius: 15px;
}

.team-a {
  background-color: #2196F3;
  color: white;
}

.team-b {
  background-color: #f44336;
  color: white;
}

.vs {
  color: var(--text-secondary);
}

/* 赛事视频样式 */
.videos-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.tournament-video-card {
  display: flex;
  flex-direction: column;
  background-color: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tournament-video-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.tournament-video-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 比例 */
  overflow: hidden;
}

.tournament-video-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.tournament-video-card:hover .tournament-video-image {
  transform: scale(1.05);
}

.tournament-video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.tournament-video-info {
  padding: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tournament-video-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tournament-video-series {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: var(--primary-color);
}

.tournament-video-stats {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
}

.tournament-video-views {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .game-header {
    height: 300px;
  }
  
  .header-title {
    font-size: 36px;
  }
  
  .header-subtitle {
    font-size: 16px;
  }
  
  .tab-navigation {
    overflow-x: auto;
    padding: 10px 5px;
  }
  
  .tab-item {
    flex: 0 0 auto;
    margin: 0 5px;
  }
  
  .games-grid,
  .live-container,
  .videos-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .review-content {
    flex-direction: column;
    align-items: center;
  }
  
  .review-cover {
    width: 120px;
    height: 180px;
    margin-bottom: 15px;
  }
  
  .news-card {
    flex-direction: column;
  }
  
  .news-thumbnail {
    width: 100%;
    height: 180px;
  }
}

@media (max-width: 480px) {
  .game-header {
    height: 200px;
  }
  
  .header-content {
    padding: 20px;
  }
  
  .header-title {
    font-size: 28px;
  }
  
  .tab-content {
    padding: 20px 15px;
  }
  
  .games-grid,
  .live-container,
  .videos-container {
    grid-template-columns: 1fr;
  }
  
  .review-header {
    flex-direction: column;
    gap: 10px;
  }
  
  .review-title {
    margin-left: 0;
  }
  
  .review-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
</style>